<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        #submit{
            float: right;
        }
    </style>
</head>
<body onload="getQuestion()">
<div class="layui-form layuimini-form">
    <div class="layui-form-item" hidden>
        <label class="layui-form-label">题目类型</label>
        <div class="layui-input-block">
            <input type="text" name="examId" id="examId" lay-verify="" lay-reqtext="" placeholder="" value="" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">题目类型</label>
        <div class="layui-input-block">
            <input type="text" name="examName" id="examName" lay-verify="required" lay-reqtext="" placeholder="" value="" class="layui-input" readonly>
            <tip>试题类型</tip>
        </div>
    </div>
<!--    <div class="layui-form-item">
        <label class="layui-form-label required">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">题目</label>
        <div class="layui-input-block">
            <input type="text" name="examMessage" id="examMessage" lay-verify="required" lay-reqtext="" placeholder="" value="" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分数</label>
        <div class="layui-input-block">
            <input type="text" name="score" id="score" placeholder="" value="" class="layui-input" readonly>
        </div>
    </div>
    <!--<div class="layui-form-item">
        <label class="layui-form-label">职业</label>
        <div class="layui-input-block">
            <input type="text" name="work" placeholder="请输入职业" value="" class="layui-input">
        </div>
    </div>-->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">回答</label>
        <div class="layui-input-block">
            <textarea name="ownAnswer" class="layui-textarea" placeholder="请输入答案"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" id="last" lay-submit lay-filter="last">上一题</button>
            <button class="layui-btn layui-btn-normal" id="next" lay-submit lay-filter="next">下一题</button>

            <button class="layui-btn layui-btn-normal" id="submit" lay-submit lay-filter="submit">提交答案</button>

        </div>
    </div>
</div>
<script src="../../js/lay-module/http/http.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    // 定义当前是第几道题
    var currPage = 1;
    console.log(currPage);
    // 设置当前的list
    var examList = new Array();
    console.log(examList)

    // 记录总共多少道题
    var examCount = 2;



    // 判断是否显示按钮，以及提交答案的提示
    function handleBtn() {
        if(currPage < 1){
            layer.alert("错误，请刷新页面")
            return false;
        }
        if(currPage == 1){
            // 是第一题，隐藏【上一题】按钮
            $("#last").attr("style", "display:none;");  //隐藏
        }else if(currPage == examCount){
            // 如果到了最后一道题
            $("#next").attr("style", "display:none;");  //隐藏next按钮
        } else {
            // 不是第一题，也不是最后一道题，显示按钮
            $("#last").attr("style", "display:inline-block;"); //显示
            $("#next").attr("style", "display:inline-block;");
        }
    }
    // 初始化试题
    function getQuestion(){
        $ = layui.$;

        $.ajax({
            type: 'GET',
            url: $api + '/risk/tb-exam/exam?page=' + currPage + '&limit=1',
            contentType: "application/json;charset=utf-8",
            async: false,
            headers: {
                'Authorization': layui.data('table')['Authorization']
            },
            success: function (res) {
                identifyCode(res)
                console.log(currPage)
                examCount = res.count
               // 1.处理当前的按钮是否显示
                handleBtn();
                // 2.对内容进行赋值
                $("#examId").val(res.data[0].examId);
                $("#examName").val(res.data[0].examName);
                $("#examMessage").val(res.data[0].examMessage);
                $("#score").val(res.data[0].score);
            }
        });
    }

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


        // 监听提交,返回上一题
        form.on('submit(last)', function (data) {
            // 1.currPage - 1页数减一
            currPage = currPage - 1;

            // 3.删除list最后一个,并将list的最后一个对表单进行赋值
            var currExamInfo = examList.pop();
            /*console.log("当前的弹出考试信息是：" + JSON.stringify(currExamInfo))*/

            $("#examName").val(currExamInfo.examName)
            $("#examMessage").val(currExamInfo.examMessage)
            $("#score").val(currExamInfo.score)
            // 4.处理按钮
            handleBtn();
            layer.close(index);
            /*var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

            });*/

            return false;
        });

        // 监听提交，获取下一题
        form.on('submit(next)', function (data) {
            // 1.题数加1
            currPage = currPage + 1;

            // 2.将表单内容加入list
            examList.push(data.field);
            /*console.log("当前所有考试是：" + JSON.stringify(examList))*/
            // 3.获取下一道题
            getQuestion();
            layer.close(index);
            /*var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

            });*/

            return false;
        });

        // 监听提交，提交试题
        form.on('submit(submit)', function (data) {

            var subMsg = "确定提交试题？";
            // 判断当前页是否是最后一题
            if(currPage != examCount){
                subMsg = "是否提前交卷？"
            }
            var index = layer.confirm(subMsg + JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                examList.push(data.field);
                // 将数据存入数据库
                $.ajax({
                    type: 'POST',
                    url: $api + 'risk/tb-exam/postExam',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(examList),
                    async: false,
                    headers: {
                        'Authorization': layui.data('table')['Authorization']
                    },
                    success: function (res) {
                        identifyCode(res)
                        layui.data('table', {
                            key: 'examResult',
                            value: res.data
                        });
                        window.location.href = "risk-showExam.html"
                    }
                });

            });

            return false;
        });

    });
</script>
</body>
</html>